<template>
  <div>
    <!-- 初始显示PC组件 -->
    <Indexpc v-if="$media === 'pc'" />
    <Indexiphone v-else-if="$media === 'iphone'" />
  </div>
</template>

<script setup>
import Indexpc from "@/views/pc/index.vue";
import Indexiphone from "@/views/iphone/index.vue";
import { computed, ref, onUnmounted,  onMounted } from "vue";
// 创建一个响应式的变量来表示当前设备类型
const media = ref("pc");
// 使用computed属性根据窗口宽度来更新media的值
const $media = computed(() => {
  const width = window.innerWidth;
  if (width < 768) {
    return "iphone";
  } else {
    return "pc";
  }
});


</script>

<style lang="scss" scoped></style>